<template>
  <div class="parent">
    <!-- 滚动展示区 -->
    <div class="scrolling-display-module">
      <div class="card-body">
        <ScrollingDisplay />
      </div>
    </div>

    <!-- 立即发布区 -->
    <div class="immediate-release-module">
      <div class="card-body">
        <ImmediateRelease />
      </div>
    </div>

    <!-- 政策信息 -->
    <div class="policy-module">
      <div class="card-body">
        <PolicyInfo />
      </div>
    </div>

    <!-- 防拐防骗 -->
    <div class="anti-kidnapping-module">
      <div class="card-body">
        <AntiKidnapping />
      </div>
    </div>

    <!-- 信息展示 -->
    <div class="info-display-module">
      <div class="card-body">
        <InfoDisplay />
      </div>
    </div>

    <!-- 失踪人口热力图 -->
    <div class="heatmap-module">
      <div class="card-body">
        <Heatmap />
      </div>
    </div>

    <!-- 寻人资讯 -->
    <div class="search-info-module">
      <div class="card-body">
        <SearchInfo />
      </div>
    </div>

    <!-- 数据看板 -->
    <div class="dashboard-module">
      <div class="card-body">
        <Dashboard />
      </div>
    </div>

    <!-- 失踪人口预测轨迹 -->
    <div class="trajectory-module">
      <div class="card-body">
        <Trajectory />
      </div>
    </div>

    <!-- 视频区 -->
    <div class="video-module">
      <div class="card-body">
        <Video />
      </div>
    </div>

    <!-- 寻人问答区 -->
    <div class="search-question-module">
      <div class="card-body">
        <SearchQuestion />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { defineAsyncComponent } from 'vue';

// 使用 defineAsyncComponent 实现懒加载
const ScrollingDisplay = defineAsyncComponent(() => import('./ScrollingDisplay.vue'));
const ImmediateRelease = defineAsyncComponent(() => import('./ImmediateRelease.vue'));
const PolicyInfo = defineAsyncComponent(() => import('./PolicyInfo.vue'));
const AntiKidnapping = defineAsyncComponent(() => import('./AntiKidnapping.vue'));
const InfoDisplay = defineAsyncComponent(() => import('./InfoDisplay.vue'));
const Heatmap = defineAsyncComponent(() => import('./Heatmap.vue'));
const SearchInfo = defineAsyncComponent(() => import('./SearchInfo.vue'));
const Dashboard = defineAsyncComponent(() => import('./Dashboard.vue'));
const Trajectory = defineAsyncComponent(() => import('./Trajectory.vue'));
const Video = defineAsyncComponent(() => import('./Video.vue'));
const SearchQuestion = defineAsyncComponent(() => import('./SearchQuestion.vue'));

// 创建 Vue Router 实例
const router = useRouter();
</script>

<style scoped>
/* 父容器的网格布局 */
.parent {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(3, 33%); /* 每行三个单元格，均分宽度 */
  grid-template-rows: repeat(14, 30vh); /* 行高为 30vh，行数从15改为14 */
  gap: 5px; /* 卡片之间的间距 */
  width: 100%; /* 容器宽度为100% */
  height: auto; /* 高度自适应 */
  padding: 5px; /* 容器内边距 */
  box-sizing: border-box; /* 包含内边距和边框在内的总宽度和高度 */
  overflow: auto; /* 溢出时显示滚动条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 42, 42, 0.8) transparent;
}

.card-body {
  height: 100%; /* 高度填满父容器 */
  width: 100%; /* 宽度填满父容器 */
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 2px 12px 0 var(--border-color); /* 阴影效果 */
  border-width: 1px;
}

/* 信息展示模块的网格位置 */
.info-display-module {
  grid-column: 1 / 4; /* 占据第一到第三列 */
  grid-row: 4 / 6; /* 占据第四到第六行 */
}

/* 防拐防骗模块的网格位置 */
.anti-kidnapping-module {
  grid-column: 1 / 3; /* 占据第一到第二列 */
  grid-row: 3 / 4; /* 占据第三行 */
}

/* 政策信息模块的网格位置 */
.policy-module {
  grid-column: 3 / 4; /* 占据第三列 */
  grid-row: 2 / 4; /* 占据第二到第四行 */
}

/* 立即发布模块的网格位置 */
.immediate-release-module {
  grid-column: 3 / 4; /* 占据第三列 */
  grid-row: 1 / 2; /* 占据第一行 */
}

/* 滚动展示区模块的网格位置 */
.scrolling-display-module {
  grid-column: 1 / 3; /* 占据第一到第二列 */
  grid-row: 1 / 3; /* 占据第一到第二行 */
}

/* 失踪人口预测轨迹模块的网格位置 */
.trajectory-module {
  grid-column: 1 / 3; /* 占据第一到第二列 */
  grid-row: 6 / 9; /* 占据第六到第九行 */
}

/* 失踪人口热力图模块的网格位置 */
.heatmap-module {
  grid-column: 2 / 4; /* 占据第二到第三列 */
  grid-row: 9 / 12; /* 占据第九到第十二行 */
}

/* 寻人资讯模块的网格位置 */
.search-info-module {
  grid-column: 3 / 4; /* 占据第三列 */
  grid-row: 6 / 9; /* 占据第六到第九行 */
}

/* 数据看板模块的网格位置 */
.dashboard-module {
  grid-column: 1 / 2; /* 占据第一列 */
  grid-row: 9 / 13; /* 占据第九到第十三行 */
}

/* 视频区模块的网格位置 */
.video-module {
  grid-column: 2 / 4; /* 占据第二到第三列 */
  grid-row: 12 / 15; /* 占据第十二到第十四行 */
}

/* 寻人问答区模块的网格位置 */
.search-question-module {
  grid-column: 1 / 2; /* 占据第一列 */
  grid-row: 13 / 15; /* 占据第十三到第十四行 */

}

/* 小屏幕适配 */
@media (max-width: 1280px) {
  .parent {
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 小屏幕下改为单列布局 */
    gap: 10px; /* 调整间距 */
    height: auto; /* 高度自适应 */
  }

  /* 设置所有模块的默认顺序 */
  .scrolling-display-module { order: 1; }
  .immediate-release-module { order: 2; }
  .policy-module { order: 3; }
  .anti-kidnapping-module { order: 4; }
  .info-display-module { order: 5; }
  .trajectory-module { order: 6; }
  .heatmap-module { order: 7; }
  .search-info-module { order: 8; }
  .dashboard-module { order: 9; }
  .video-module { order: 10; }
  .search-question-module { order: 11; }
}
</style>
